<template>
	<view class="content">
		<view style="height: 1rpx"></view>
		<button v-if="current!==''" class="rmButton" @click="remove">删除</button>
		<view class="bigBox">
			<view class="item">
				<span>公司名称</span>
				<input type="text" v-model="firmName" placeholder="请输入"
				placeholder-style="color: #99A3A3;font-size: 24rpx;">
			</view>
			<view class="item">
				<span>职位名称</span>
				<input type="text" v-model="jobName" placeholder="请输入"
				placeholder-style="color: #99A3A3;font-size: 24rpx;">
			</view>
			<view class="item">
				<span>开始时间</span>
				<view class="select" @click="getStartTime">
					<span>{{startTime?startTime:'请选择'}}</span>
					<image src="/static/img/my_slices/Frame222-2@2x.png" mode="scaleToFill"></image>
				</view>
				<uDatetimePicker
						:show="startTimeShow"
						v-model="now"
						mode="date"
						@confirm="startTimeConfirm"
						@cancel="startTimeClose"
						:minDate="252432000000"
				></uDatetimePicker>
			</view>
			<view class="item">
				<span>结束时间</span>
				<view class="select" @click="getEndTime">
					<span>{{endTime?endTime:'请选择'}}</span>
					<image src="/static/img/my_slices/Frame222-2@2x.png" mode="scaleToFill"></image>
				</view>
				<uDatetimePicker
						:show="endTimeShow"
						v-model="now"
						mode="date"
						@confirm="endTimeConfirm"
						@cancel="endTimeClose"
						:minDate="252432000000"
				></uDatetimePicker>
			</view>
		
			<view class="item" style="flex-wrap: wrap;">
				<span>经历描述</span>
				<textarea v-model="experience" placeholder="描述实习/工作经历,比如你的实习部门是什么,负责哪些工作,收获什么,不超过200字"
				placeholder-style="color: #99A3A3;font-size: 24rpx;"
				maxlength="200"></textarea>
				<span v-if="!alipay">{{experience.length}}/200</span>
				
			</view>
		</view>
		
		<button class="saveButton" @click="save">保存</button>
	</view>
</template>

<script>
	import uDatetimePicker from '@/subpageA/uview-ui/components/u-datetime-picker/u-datetime-picker.vue'
	
	export default {
		data() {
			return {
				firmName:'',
				
				jobName:'',
				
				startTime:'',
				startTimeShow:false,
				
				now:Number(new Date()),
				
				endTime:'',
				endTimeShow:false,
				
				experience:'',
				
				alipay:false,
				
				current:''
			};
		},
		components:{
			uDatetimePicker
		},
		onLoad(option) {
			//#ifdef MP-ALIPAY
				this.alipay=true;
			//#endif
			
			//修改经历
			if(option.option){
				let option2=JSON.parse(option.option)
				//console.log('option',option2);
				this.startTime=option2.startDay;
				this.endTime=option2.endDay;
				this.firmName=option2.name;
				this.jobName=option2.position;
				this.experience=option2.expDesc;
				this.current=option2.current;
			}
			
			
		},
		methods:{
			formatDate(time){
			    var date = new Date(time);
			 
			    var year = date.getFullYear(),
			        month = date.getMonth() + 1,//月份是从0开始的
			        day = date.getDate();
			    var newTime = year + '-' +
			                month + '-' +
			                day ;
			    return newTime;         
			},
			startTimeConfirm(date){
				//console.log(this.formatDate(date.value));
				if(this.endTime&&new Date(this.endTime).getTime()<date.value){
					uni.showToast({
						title: '开始时间不得早于结束时间',
						duration: 1500,
						icon:"none"
					});
				}else{
					this.startTime=this.formatDate(date.value).toString()
				}
				
				this.startTimeShow=false;
			},
			startTimeClose(){
				this.startTimeShow=false
			},
			getStartTime(){
				//支付宝小程序的选择方式，因为<u-picker>不兼容支付宝小程序
				//#ifdef MP-ALIPAY
				my.datePicker({
				  currentDate: this.formatDate(this.now),
				  startDate: '1900-1-1',
				  endDate: this.formatDate(this.now),
				  success: (res) => {
					  this.startTimeConfirm({value:new Date(res.date).getTime()})
				  },
				});
				// #endif
				
				//#ifndef MP-ALIPAY
				this.startTimeShow=true;
				//#endif
			},
			endTimeConfirm(date){
				//console.log(this.formatDate(date.value));
				if(this.startTime&&new Date(this.startTime).getTime()>date.value){
					uni.showToast({
						title: '开始时间不得早于结束时间',
						duration: 1500,
						icon:"none"
					});
				}else{
					this.endTime=this.formatDate(date.value).toString()
					
				}
				this.endTimeShow=false;
				
			},
			endTimeClose(){
				this.endTimeShow=false
			},
			getEndTime(){
				//支付宝小程序的选择方式，因为<u-picker>不兼容支付宝小程序
				//#ifdef MP-ALIPAY
				my.datePicker({
				  currentDate: this.formatDate(this.now),
				  startDate: '1900-1-1',
				  endDate: this.formatDate(this.now+31536000000*5),
				  success: (res) => {
					this.endTimeConfirm({value:new Date(res.date).getTime()})
				  },
				});
				// #endif
				
				//#ifndef MP-ALIPAY
				this.endTimeShow=true;
				//#endif
			},
			save(){
				if(this.startTime&&this.endTime&&this.firmName&&this.jobName&&this.experience){
					let workExperience={
						startDay:this.startTime,
						endDay:this.endTime,
						name:this.firmName,
						position:this.jobName,
						expDesc:this.experience,
						current:this.current
					}
					this.$bus.$emit('getWorkExperience',workExperience)
					uni.navigateBack({
						delta:1
					})
				}else{
					uni.showToast({
						title: '请填写完整资料',
						duration: 1500,
						icon:"none"
					});
				}
				
			},
			remove(){
				this.$bus.$emit('removeWorkExperience',this.current)
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: #F3F7F8;
		
		.bigBox{
			width: 622rpx;
			margin: 32rpx;
			padding: 32rpx 32rpx 1rpx; 
			background-color: #FFFFFF;
			border-radius: 16rpx;
			
			.item{
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				position: relative;
				>span:nth-of-type(1){
					display: block;
					width: 188rpx;
					font-size: 14px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #001A18;
				}
				
				input{
					display: inline-block;
					width: 360rpx;
					margin-left: 20rpx;
				}
				.placeholder-class{
					font-size: 12px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #99A3A3;
				}
				
				.select{
					margin-left: 20rpx;
					display: flex;
					align-items: center;
					>span{
						display: inline-block;
						width: 400rpx;
						font-size: 12px;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #99A3A3;
					}
					>image{
						width: 12rpx;
						height: 42rpx;
						align-self: end;
					}
				}
				
				textarea{
					width: 586rpx;
					height: 176rpx;
					padding: 20rpx;
					padding-bottom: 60rpx;
					margin-top: 32rpx;
					background: #F3F7F8;
					border-radius: 16rpx;
				}
				
				>span:nth-of-type(2){
					position: absolute;
					right: 32rpx;
					bottom: 10rpx;
					font-size: 10px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #99A3A3;
				}
			}
			
		}
		
		.rmButton{
			position: relative;
			left: 540rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 138rpx;
			height: 56rpx;
			margin: 32rpx;
			background: #FF5F58;
			border-radius: 16rpx;
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.saveButton{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 686rpx;
			height: 96rpx;
			margin: 32rpx;
			margin-top: 96rpx;
			background: #08C8BD;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		
		
	}
</style>
